<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>识别中心 - AI情绪魔镜</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <div id="app">
    <header>
      <h1>识别中心</h1>
    </header>
    <main class="page">
      <h2>开始识别</h2>

      <!-- 面部扫描区域 -->
      <section class="card recognition-section">
        <h3><i class="fas fa-camera"></i> 面部扫描</h3>
        <p>请将面部正对摄像头进行扫描。</p>
        <div class="placeholder-area video-placeholder">
            <!-- 摄像头画面占位 -->
            <span>摄像头画面</span>
        </div>
        <button onclick="alert('开始面部扫描')"><i class="fas fa-video"></i> 开始扫描</button>
      </section>

      <!-- 语音分析区域 -->
      <section class="card recognition-section">
        <h3><i class="fas fa-microphone-alt"></i> 语音分析</h3>
        <p>请点击按钮开始录音。</p>
         <div class="placeholder-area audio-placeholder">
            <!-- 语音录制/频谱占位 -->
            <span>语音录制/频谱图</span>
        </div>
        <button onclick="alert('开始录音')"><i class="fas fa-microphone"></i> 开始录音</button>
      </section>

      <!-- 生理数据同步区域 -->
      <section class="card recognition-section">
        <h3><i class="fas fa-heart-pulse"></i> 生理数据同步</h3>
        <p>连接您的生物反馈设备。</p>
         <div class="placeholder-area device-placeholder">
            <!-- 设备连接状态占位 -->
            <span>设备连接状态</span>
        </div>
        <button onclick="alert('连接设备')"><i class="fas fa-bluetooth"></i> 连接设备</button>
      </section>

    </main>
    <footer>
      <nav>
        <button onclick="window.location.href='index.html'">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </button>
        <button class="active" onclick="window.location.href='recognition.html'">
          <i class="fas fa-brain"></i>
          <span>识别中心</span>
        </button>
        <button onclick="window.location.href='intervention.html'">
          <i class="fas fa-hand-holding-heart"></i>
          <span>干预工坊</span>
        </button>
        <button onclick="window.location.href='growth.html'">
          <i class="fas fa-chart-line"></i>
          <span>成长中心</span>
        </button>
        <button onclick="window.location.href='my.html'">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </button>
      </nav>
    </footer>
  </div>
  <script src="main.js"></script>
</body>
</html> 